<template>
  <div id="app" style="align-content: center;background-color: white">
    <el-container>
      <el-header style="width: 1887px">
        <el-menu :default-active="activeIndex"
                 class="el-menu-demo" mode="horizontal"
                 @select="handleSelect"
                 background-color="#B3C0D1"
        >
          <div style="float: right;margin-top: 15px;margin-right: 50px">
            <div style="float: left;margin-top: 15px;margin-left: 100px">
              <img src="https://www1.djicdn.com/dps/cee842f19dde1561650754528f49d6b5.svg" alt="" >
            </div>

            <el-button @click="shopList" style="background-color: cornflowerblue;text-color:#fff;margin: 0 30px" type="primary">商城</el-button>
            <el-button style="margin: 0 10px;
                        background-color: rgba(0,0,0,0);border: 0;top: 11px" @click="search()"
                       icon="el-icon-search"></el-button>
            <el-button style="margin: 0 20px;border: 0" icon="el-icon-user" @click="personal()"></el-button>
          </div>


          <el-submenu index="1" >
            <template slot="title" >航拍无人机</template>
          </el-submenu>

          <el-submenu index="2">
            <template  slot="title">手持摄影设备</template>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">商用产品及方案</template>
          </el-submenu>

          <el-submenu index="4">

            <template slot="title">探索精彩</template>
            <el-menu-item index="2-1">天空之城</el-menu-item>
            <el-menu-item index="2-2">大疆社区</el-menu-item>
            <el-menu-item index="2-3">新闻中心</el-menu-item>
            <el-menu-item index="2-4">招聘精英</el-menu-item>
            <el-menu-item index="2-5" @click="active">精彩活动</el-menu-item>
          </el-submenu>

          <el-submenu index="5">
            <template slot="title" >服务与支持</template>
          </el-submenu>

        </el-menu>
      </el-header>
      <template>
        <el-carousel :interval="10000" arrow="always" width="1230px" height="800px">
          <el-carousel-item v-for="item in bannerArr" :key="item">
            <img :src="item.url" style="width: 100%;height: 100%" alt="">
          </el-carousel-item>
        </el-carousel>
      </template>


      <el-main>
<div>
        <div style="width: 1887px">
          <div :gutter="20">
            <div span="12">
              <div style="width: 890px;height: 696px;margin: 0px 10px;float: left">
                <div style="width:100%;height:100%" alt="">
                  <img src=" https://www1.djicdn.com/cms/uploads/d7c80d93ea06ee706caf42d7d92b1f05@1x.webp">

                </div>
              </div>
            </div>

            <div span="12">
              <div style="width: 890px;height: 696px;margin: 0px 10px;float: left">
                <div style="width: 100%;height: 100%" alt="">
                  <img src=" https://www1.djicdn.com/cms/uploads/70e091df66d57745608d5c0674ed8a4e@1x.webp">

                </div>
              </div>
            </div>
          </div>
        </div>

        <div style="width: 1887px">
          <div :gutter="20">
            <div span="12">
              <div style="width: 890px;height: 696px;margin: 0px 10px;float: left">
                <div style="width:100%;height:100%" alt="">
                  <img src="https://www1.djicdn.com/cms/uploads/6cbcec2f6e38efdccad35fa1c810e10d@1x.webp">

                </div>
              </div>
            </div>

            <div span="12">
              <div style="width: 890px;height: 696px;margin: 0px 10px;float: left">
                <div style="width: 100%;height: 100%" alt="">
                  <img src="https://www1.djicdn.com/cms/uploads/c1073a1da4f383a75de3c748aff706ad@1x.webp">

                </div>
              </div>
            </div>
          </div>
        </div>
  </div>


<div style="display:inline-block">
  <template>
    <el-carousel :interval="4000" type="card" height="720px" style="width:1887px">
      <el-carousel-item v-for="item in arr" :key="item">
        <img :src="item" style="width: 100%;height: 100%" alt="">
      </el-carousel-item>
    </el-carousel>
  </template>

</div>

        <h1 style="text-align: center;line-height:50px;font-size:40px">创新故事</h1>
        <h3 style="text-align: center">在世界各地，许多人正在通过创新的产品技术去放飞想象力、该表工作和生活。</h3>
        <div style="width: 1847px;float:left;margin: 0px 300px">
          <div :gutter="20">
            <div span="12" >
              <div style="width: 591px;height: 591px;margin: 0px 10px;float: left">
                <div>
                  <img src= "https://www1.djicdn.com/cms/uploads/95fcff7d1f056ec08722bc33a61e9c15@1x.webp"
                       style="width: 100%;height: 100%" alt="">


                </div>
              </div>
            </div>

            <div span="12">
              <div style="width: 591px;height: 591px;margin: 0px 10px;float: left">
                <div>
                  <img src="https://www1.djicdn.com/cms/uploads/cbbf6dbb56a0ef46e66f1f93f807f549@1x.webp"
                       style="width: 100%;height: 100%" alt="">

                </div>
              </div>
            </div>

          </div>
        </div>


        <h1 style="text-align: center">了解不同领域的大疆产品</h1>
        <div style="width: 1847px; float:left">

          <div style="overflow: hidden ;margin: 0px 300px" >
            <div span="8" style="float: left ;margin: 0px 10px ">
              <div style="width: 388px;height: 511px">
                <div style="width: 100%;height: 100% " alt="" >
                  <img src="https://www1.djicdn.com/cms/uploads/77609722f7befd86e378b6390ce61293@1x.webp">


                </div>
              </div>
            </div>

            <div span="8">
              <div style="width: 388px;height: 511px;float: left ;margin: 0px 10px">
                <div style="width: 100%;height: 100%" alt="">
                  <img src="https://www1.djicdn.com/cms/uploads/5d0dfd55c921f05e8d0df3c822bed589@1x.webp">


                </div>
              </div>
            </div>

            <div span="8">
              <div style="width: 388px;height: 511px;float: left ;margin: 0px 10px">
                <div style="width: 100%;height: 100%" alt="">
                  <img src="https://www1.djicdn.com/cms/uploads/8caf9abcccf9cd282c54bf62e0b1c89a@1x.webp">


                </div>
              </div>
            </div>

          </div>
        </div>

      </el-main>

      <el-footer style="padding: 0">
        <div style="background-color: #3f3f3f;width: 1887px;height: 200px ">
          <div>
            <p style="text-align: center" >
              <img src="https://www1.djicdn.com/dps/cee842f19dde1561650754528f49d6b5.svg" alt="">
              <a href="" style="color: #d3dce6;text-decoration:none">关于我们  联系我们  招聘精英  市场合作  代理商门户  RoboMaster  惠飞培训中心  大疆互娱  大疆车载</a>

            </p>
            <el-divider></el-divider>
            <p style="color: #B3C0D1;text-align: center"> 隐私权政策 使用条款 疆湖名录 网站问题反馈</p>

            <p style="color: #B3C0D1;text-align: center">Copyright © 2022 DJI 大疆创新 版权所有 粤ICP备12022215号
                本网站直接或间接向消费者推销商品或者服务的商业宣传均属于“广告”（包装及参数、售后保障等商品信息除外）
            </p>
          </div>

        </div>
      </el-footer>

    </el-container>

  </div>
</template>

<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;


}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 739px;
  margin: 0;

}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

</style>
<script>
export default {
  name: 'HomeView',
  data: function () {
    return {
      arr: ["https://www1.djicdn.com/cms/uploads/ba1220c46f6446c56d97a73684125b57.jpg",
        "https://www1.djicdn.com/cms/uploads/8cf11d1bc1f0a8ceac63d3310e38a1dd.jpg",
        "https://www1.djicdn.com/cms/uploads/aa1813833a028897f1cb6b40f914b72f.jpg",
        "https://www1.djicdn.com/cms/uploads/2d2b72891abfb38a4fc5c0bd6476f2f4.jpg",
        "https://www1.djicdn.com/cms/uploads/70374dd8010f81710f63599e1ddd807c.jpg",
        "https://www1.djicdn.com/cms/uploads/e45f50d0a61d5ab597d4ffad33e78421.jpg",
        "https://www1.djicdn.com/cms/uploads/ff4cdb40b5cb8a51a8ed954675b7f45d.jpg",
        "https://www1.djicdn.com/cms/uploads/248a7d0b6d38b2d1c9e7f564a51e9b9f.jpg",
        "https://www1.djicdn.com/cms/uploads/cd6fa62cfd8b106005b364988bcb6691.jpg",
        "https://www1.djicdn.com/cms/uploads/366c47dd4ebb77a0274beb5a4fa9f77c.jpg"
      ],
      bannerArr: []
    }
  },
  created() {
    this.getBannerArr()
  },
  methods: {
    getBannerArr(){
      let url = "http://localhost:8080/banner/select"
      this.axios.get(url).then((response) => {
            this.bannerArr = response.data.data;
      })
    },
    shopList() {
      location.href="http://localhost:8080/list";
    },
    active() {
      location.href="http://localhost:8080/activity";
    },
    personal(){
      location.href="http://localhost:8080/personal";
    }
  }

}

</script>
